<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*通过选择器确定样式的作用范围 */
        /* input{
            display: block;
            width: 80px;
            height: 40px;
            background-color: rgb(140, 235, 100);
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        } */
        /*通过id确定样式的作用范围*/
        #btn1{
            display: block;
            width: 80px;
            height: 40px;
            background-color: rgb(194, 12, 194);
            color: white;
            border: 3px solid green;
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
            border-radius: 5px;
        }
        /*通过class确定样式的作用范围*/
        .shapeClass{
            display: block;
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }
        .colorClass{
            background-color: rgb(140, 235, 100);
            color: white;
            border: 3px solid green;
        }
        .fontClass {
            font-size: 22px;
            font-family: '隶书';
            line-height: 30px;
        }
        /*css浮动*/
        .outerDiv{
            width: 500px;
            height: 300px;
            border: 1px solid green;
            background-color: rgb(230, 224, 224);
        }
        .innerDiv{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
        }
        .d1{
            background-color: greenyellow;
        }
        .d2{
            background-color: rgb(79, 230, 124);
        }
        .d3{
            background-color: rgb(26, 165, 208);
        }
        /*css定位*/
        .innerDiv1{
            width: 100px;
            height: 100px;
        }
        .d4{
            background-color: rgb(166, 247, 46);
            /*静态定位*/
            position: static;
        }
        .d5{
            background-color: rgb(79, 230, 124);
            /*绝对定位*/
            position: absolute;
            left: 300px;
            top: 100px;
        }
        .d6{
            background-color: rgb(26, 165, 208);
            /*相对定位*/
            position: relative;
            left: 30px;
            top: 10px;
        }
        .d7{
            background-color: rgb(26, 255, 208);
            /*fixed相对浏览器窗口定位*/
            position: fixed;
            right: 50px;
            top: 10px;
        }
        /*css盒子模型*/
        .outerDiv2{
            width: 800px;
            height: 300px;
            border: 1px solid green;
            background-color: rgb(230, 224, 224);
            margin: 0px auto;
        }
        .innerDiv2{
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            float: left;
            /*上右下左*/
            margin: 10px 20px 30px 40px;
        }
        .d8{
            background-color: rgb(166, 247, 46);
            padding: 10px 20px 30px 40px;
        }
        .d9{
            background-color: rgb(79, 230, 124);
        }
        .d10{
            background-color: rgb(26, 165, 208);
        }
    </style>
    <!--通过link标签引入外部css样式-->
    <!-- <link href="./buttons.css" rel="stylesheet" type="text/css"/> -->
</head>
<body>
    <!--CSS引入方式-->
    <div>
        <!--1、行内式
                display: block 展示为一个块级元素
            -->
        <input type="button" value="按钮" style="display: block; 
            width: 60px;
            height: 40px;
            background-color: rgb(140, 235, 100);
            color: rgb(116, 26, 26);
            border: 3px solid green;
            font-size: 22px;
            line-height: 30px;
            border-radius: 5px;">
        
        <!--2、内嵌式:只能作用于本文件
        -->
        <input type="button" value="按钮1" />
        
        <!--3、连接式/外部样式表-->
        <input type="button" value="按钮2" />
    </div>
    <!--css选择器-->
    <div>
        <!--1、元素选择器:通过标签名确定样式的作用范围-->
        <!--2、id选择器:通过id属性确定样式的作用范围,但id值具有唯一性-->
        <input id="btn1" type="button" value="按钮3"/>
        <!--3、class选择器:根据class属性确定样式的作用范围,使用最普遍-->
        <input class="shapeClass colorClass fontClass" type="button" value="按钮4">
        <input class="shapeClass colorClass" type="button" value="按钮5">
        <input class="colorClass fontClass" type="button" value="按钮6">
        <input class="fontClass" type="button" value="按钮7">
        <button class="shapeClass colorClass fontClass">按钮8</button>

    </div>
    <!--css浮动-->
    <div class="outerDiv">
        <div>我是div2</div>
        <span>1111</span>
        <!--css浮动:使元素脱离文档流，按照指定的方向,直到它的外边缘碰到包含框或另一个浮动框的边框为止.
            浮动的设计是为了解决图片遮挡文字的问题
            文档流是文档中可显示对象在排列时所占用的位置/空间，脱离文档流就是在页面中不占位置了
            float:left（元素向左浮动）,right（元素向右浮动）
            浮动规则：1、元素一旦浮动。脱离标准流
                     2、浮动元素不能超过左右边界
                     3、浮动元素之间不能层叠
                     4、浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出
            https://blog.csdn.net/qq_42535142/article/details/135412268
        -->
        <span class="d1">框1</span>
        <span class="innerDiv d2">框2</span>
        <span class="innerDiv d3">框3</span>
        
    </div>
    <!--css定位-->
    <div>
        <!--position属性指定了元素的定位类型
        absolute:生成绝对元素,相对于static定位以外的第一个父元素定位,元素的位置通过left,top,right,bottom属性进行规定
        fixed:生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过left,top,right,bottom属性进行规定
        relative:生成相对定位的元素,相对于其正常位置进行定位,left:20会向元素的left位置加20像素
        static:默认值，没有定位
        -->
        <!--static静态定位,默认值，元素出现在该出现的位置,块级元素垂直排列,行内元素水平排列-->
        <div class="innerDiv1 d4">框4</div>
       <!--absolute绝对定位,定位后元素会让出来位置，其他元素可以占用-->
       <div class="innerDiv1 d5">框5</div>
       <!--relative相对定位，定位之后保留原来的站位,其他元素不会移动到该位置-->
       <div class="innerDiv1 d6">框6</div>
       <div class="innerDiv1 d4">框6测试</div>
       <!--fixed针对浏览器端口的固定位置,不会随着页面的上下移动而移动.空出的位置，其他元素可以占用-->
       <div class="innerDiv1 d7">框7</div>

    </div>
    <!--css盒子模型-->
    <div class="outerDiv2">
        <!--所有html元素都可以看作盒子,css盒模型本质上是一个盒子,封装周围的html元素,包括:
            margin(外边距):清楚边框外的区域,外边距是透明的
            border（边框）:围绕在内边框和内容外的边框
            padding（内边距）:清除内容周围的区域，内边距是透明的
            content(内容):盒子的内容,显示文本和图像
        -->
        <div class="innerDiv2 d8">框8</div>
        <div class="innerDiv2 d9">框9</div>
        <div class="innerDiv2 d10">框10</div>
    </div>
</body>

</html>